<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../s/element-ui/2.13.2/theme-chalk/index.css">
<title>Dialog 对话框</title>
<style type="text/css">
[v-cloak] {
	display: none !important;
}
</style>
</head>
<body>
	<div id="app" v-cloak>

		<h3>基础用法</h3>
		<button is="el-button" type="text" @click="dialogVisible1=true">打开 Dialog</button>
		<div is="el-dialog" title="提示" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
			<div>这是一段信息</div>
			<div slot="footer" class="dialog-footer">
				<button is="el-button" @click="dialogVisible1=false">取 消</button>
				<button is="el-button" type="primary" @click="dialogVisible1=false">确 定</button>
			</div>
		</div>

		<h3>自定义内容(iFrame)</h3>
		<button is="el-button" type="text" @click="dialogVisible2=true">打开Dialog</button>
		<div is="el-dialog" :visible.sync="dialogVisible2" @open="openHook" :close-on-click-modal="false">
			<iframe :src="dialogUrl" height="250" width="100%" style="border: none;"></iframe>
		</div>

	</div>
	<script src="../../s/vue/2.7.16/vue.min.js"></script>
	<script src="../../s/element-ui/2.13.2/index.js"></script>
	<script>
		new Vue({
			el : '#app',
			data : function() {
				return {
					dialogVisible1 : false,
					dialogVisible2 : false,
					dialogUrl : 'about:blank'
				}
			},
			created : function() {
				var vm = this;
				window.addEventListener('message', function(e) {
					var data = e.data;
					if (data.action === 'dialog:close') {
						vm.dialogVisible2 = false;
					}
				});
			},
			methods : {
				handleClose : function(done) {
					this.$confirm('确认关闭？')['then'](function() {
						done();
					})['catch'](function() {
					});
				},
				openHook : function() {
					this.dialogUrl = '33_Dialog01.html';
				}
			}
		})
	</script>
</body>
</html>